<template>
  <div>
    <div class="mask" v-show="isShowMenu&&sysId!=='0'" @click="maskOut()"></div>
    <div class="enter" @click="isShowMenu=true" :class="{'enter-active':isShowMenu}" v-show="sysId!=='0'">
      <div class="sys-menu">
        <div @click.stop="sentSysId('0')">
          <div class="bg"></div>
          <div class="menu-text">
            <p>首页</p>
            <p>Home</p>
          </div>
        </div>
        <div @click.stop="sentSysId('1')" :class="{'sys-menu-active':sysId==='1'||sysIdOld==='1'}">
          <div class="bg"></div>
          <div class="menu-text">
            <p>医院</p>
            <p>Hospital</p>
            <p v-show="sysId==='1'||sysIdOld==='1'" class="enter-button" @click.stop="enterS()">{{text}}</p>
          </div>
        </div>
        <div @click.stop="sentSysId('3')" :class="{'sys-menu-active':sysId==='3'||sysIdOld==='3'}">
          <div class="bg"></div>
          <div class="menu-text">
            <p>工业</p>
            <p>Industry</p>
            <p v-show="sysId==='3'||sysIdOld==='3'" class="enter-button" @click.stop="enterS()">{{text}}</p>
          </div>
        </div>
        <div @click.stop="sentSysId('2')" :class="{'sys-menu-active':sysId==='2'||sysIdOld==='2'}">
          <div class="bg"></div>
          <div class="menu-text">
            <p>政府</p>
            <p>Government</p>
            <p v-show="sysId==='2'||sysIdOld==='2'" class="enter-button" @click.stop="enterS()">{{text}}</p>
          </div>
        </div>
        <div @click.stop="sentSysId('4')" :class="{'sys-menu-active':sysId==='4'||sysIdOld==='4'}">
          <div class="bg"></div>
          <div class="menu-text">
              <p>环保</p>
              <p>Environment</p>
              <p v-show="sysId==='4'||sysIdOld==='4'" class="enter-button" @click.stop="enterS()">{{text}}</p>
          </div>
        </div>
      </div>
    </div>
    <transition 
    name="custom-classes-transition"
    enter-active-class="animated bounceInLeft"
    leave-active-class="animated bounceOutRight"
    >
      <!-- <keep-alive> -->
        <component v-bind:is="view" :sys-url="url" :class="{'blur':isShowMenu&&sysId!=='0'}"></component>
      <!-- </keep-alive> -->
    </transition>
  </div>
</template>

<script>
import Home from './view/home'
import HospitalMain from './view/hospital/hospitalMain'
import GovernmentMain from './view/government/governmentMain'
import IndustryMain from './view/industry/industryMain'
import WaterMain from './view/water/waterMain'
import Iframe from './view/iframe'
export default {
  name: 'screenMain',
  data () {
    return {
      msg: 'main',
      ws: null,
      sysId: '0',
      sysIdOld:'',
      isShowMenu: false
    }
  },
  components: {
    'main-0': Home,
    'main-1': HospitalMain,
    'main-2': GovernmentMain,
    'main-3': IndustryMain,
    'main-4': WaterMain,
    'main-i': Iframe
  },
  mounted: function () {
    this.sentSysId(this.sysId)
    this.receiveSysid()
    document.oncontextmenu = function(){
      event.returnValue = false;
    }
  },
  computed: {
    view: function () {
      return 'main-' + this.sysId
    },
    text: function () {
      return this.sysId==='i'?'退出系统':'进入系统'
    },
    url: function () {
      switch (this.sysIdOld) {
        case '1':
          return 'http://60.190.128.190:17899/vqor4s/a/login2'
          break
        case '2':
          return ''
          break
        case '3':
          return 'http://60.190.128.190:17899/quota'
          break
        case '4':
          return 'http://180.153.58.245:9000/ep/'
          break
        default:
          return ''
      }
    }
  },
  methods: {
    sentSysId: function (id) {
      var _this = this
      this.maskOut()      
      // if (id==="0") {
      //   this.sysId = id
      //   return;
      // }
      this.$http({
        method: 'GET',
        url: "/vqdisplay/page/switch?flag="+id,
      })
      .then(function (response) {
        _this.sysid = id
      })
      .catch(function (error) {
        console.log(error);
      })
      
    },
    receiveSysid: function() {
      var socket = new WebSocket("ws://"+wsaddress+"/vqdisplay/pageswitch/m")
      this.ws = socket;
      socket.onmessage = this.wsOnMessage;
    },
    wsOnMessage: function (e) {
      this.sysId = e.data;
    },
    enterS: function () {
      if (this.sysId!=='i') {
        this.sysIdOld = this.sysId
        this.sysId = 'i'
      } else {
        this.sysId = this.sysIdOld
        this.sysIdOld = ''
      }
      this.maskOut()  
    },
    maskOut: function () {
      this.isShowMenu=false
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.enter {
  position: absolute;
  padding: 30px 5%;
  width: 100%;
  height: 300px;
  background-color: rgba(255, 255, 255, 0);
  right: -95.1%;
  top: 36%;
  text-align: center;
  box-shadow: 0 1px 2px rgba(0, 0, 0, .35);
  z-index: 999;
  transition: right .35s;
}
.enter-active {
  right: 0;
}
.mask {
  position: absolute;
  width: 100%;
  height: 100%;
  z-index: 998;
}
.blur {
  filter: blur(3px)!important;
}
.sys-menu {
    width: 100%;
    height: 240px;
    display: flex;
  }
  .sys-menu > div {
    height: 100%;
    flex-grow: 1;
    text-align: center;
    position: relative;
    overflow: hidden;
    box-shadow: 2px 2px 4px rgba(0,0,0,.12);
    
  }
  .sys-menu > div > .bg {
    position: absolute;
    width: 100%;
    height: 100%;
    background-size: cover;  
    background-position: center;
    filter: blur(4px);
    transform: scale(1.2);
    z-index: -1;
  }
  .sys-menu > div:nth-child(1) > .bg {
    background-image: url(~@/assets/menu-home.jpg);
  }
  .sys-menu > div:nth-child(2) > .bg {
    background-image: url(~@/assets/menu-hospital.jpg);
  }
  .sys-menu > div:nth-child(3) > .bg {
    background-image: url(~@/assets/menu-industry.jpg);
  }
  .sys-menu > div:nth-child(4) > .bg {
    background-image: url(~@/assets/menu-gov.jpg);
  }
  .sys-menu > div:nth-child(5) > .bg {
    background-image: url(~@/assets/menu-water.jpg);
  }
  .sys-menu-active {
    border: 1px solid #fff;
  }
  .menu-text {
    margin-top: 60px;
    font-size: 40px;
    letter-spacing: 6px;
    text-shadow: 2px 2px 4px rgba(0,0,0,.12);
  }
  .menu-text p {
    margin: 0
  }
  .menu-text p:nth-child(2) {
    font-size: 24px;
    letter-spacing: 1px;
    font-weight: 100;
  }
  .enter-button {
    font-size: 24px;
  }
</style>
